<template>
  <div>app</div>
  <button @click="add(-1)">-</button>
  <span>{{ count }}</span>
  <button @click="add(1)">+</button>

  <p>{{ doubleCount }}</p>

  <input type="text" v-model="value" />
  <button @click="add2">添加</button>

  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">删除</button>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from "vue";

interface ItemType {
  id: number;
  name: string;
}

export default defineComponent({
  setup() {
    const count = ref<number>(5);
    const add = (n: number): void => {
      count.value += n;
    };
    const doubleCount = computed<number>(() => {
      return count.value * 2;
    });
    watch(count, (val: number) => {
      console.log(val);
    });

    const value = ref<string>("");
    const list = ref<ItemType[]>([
      {
        id: 1,
        name: "zhangsan",
      },
    ]);
    const add2 = (): void => {
      list.value.push({
        id: 3,
        name: value.value,
      });
    };
    const remove = (id: number) => {
      list.value = list.value.filter((item) => {
        return item.id !== id;
      });
    };

    return {
      count,
      add,
      doubleCount,
      value,
      list,
      add2,
      remove,
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
